    // The CSS needed to style the dialog.
    var css = '.ux-auth-header {background:transparent url("img/icons/large/lock.png") no-repeat center right;padding:10px;padding-right:45px;font-weight:bold;}'
        + '.ux-auth-header .error {color:red;}'
        + '.ux-auth-form {padding:10px;}';
    Ext.util.CSS.createStyleSheet(css, 'forgot');
    
var frmForgotPassword = {
    dialog : null,
    clear : function() {
        txtEmail.setValue('');
        txtEmail.focus(true, true);
    },
    doGetPassword : function() {
        alert('To do AJAX call');              
    },
    centerForm : function() {
        if (this.dialog != null) {
            this.dialog.center();
        }
    },
     
    
    _formPanel : new Ext.form.FormPanel ({
        region      : 'center',
        layout 		: 'form',
        border      : false,
        bodyStyle   : "padding: 10px;",
        transparent : true,
        waitMsgTarget: true,
        labelWidth  : 150,
        autoHeight  : true,
        autoWidth 	: true,
        unstyled 	: true,
        items : [
            {
            xtype           : 'textfield',
            id              : 'emailId',
            name            : 'email',
            fieldLabel      : 'Get your email',
            vtype           : Ext.form.VTypes.emailText ,
            validateOnBlur  : false,
            allowBlank      : false
        }]
    }),
    
    showDialog : function() {
        if (!this.dialog) {
            this.dialog = new Ext.Window({
            		width		: 350,
	                autoHeight	: true,
	                closable    : false,
	                resizable   : false,
	                draggable   : true,
	                modal       : true,
	                iconCls     : 'ux-auth-header-icon',
                    title : 'Forgot your password?',
                    closable : false,
                    resizable : true,
                    draggable: false,
                    plain: true,    
                    items       : [ {
                    	xtype   : 'panel',
                        baseCls : 'x-plain',
                        html    : 'Please enter your e-mail, a message will be sent with information on how to get your new password',
                        cls     : 'ux-auth-header',
                        region  : 'north',
                        height  : 60
	                    },
	                    this._formPanel],
                    buttons: [{
                        id : 'btnLogin',
                        text: 'Get your password',
                        disabled:false,
                        handler: function() {
                    	frmForgotPassword.doGetPassword();
                        }
                    },{
                        id : 'btnCancel',
                        text: 'Cancel',
                        handler: function(){
                    		history.back();
                        }
                    }]                    
            });
            Ext.EventManager.onWindowResize(function() {frmForgotPassword.centerForm();})  ;
            this.dialog.show();
        }
    }
};
